<template>
  <div class="piecing-dialog" 
    :style="{background: piecingStyle.background}"
    ref="piecingWrapper"
  >
      <div class="piecing-dialog-header">
        <h3 class="piecing-dialog-title" 
          :style="{color: piecingStyle.color}"
        >{{info.title}}</h3>
        <p class="piecing-dialog-desc"><i class="icon icon-clock"></i> 2019-07-12 13:30:28</p>
      </div>

      <!-- <div class="piecing-dialog-body clearfix" style="display: none;">
        <div class="img-list img-middle-list pull-left">
          <ul>
            <li><img src="./img/pic-1.jpg" alt=""></li>
            <li><img src="./img/pic-2.jpg" alt=""></li>
          </ul>
        </div> 
        <div class="img-list img-small-list pull-right">
          <ul>
            <li><img src="./img/pic-mid-1.jpg" alt=""></li>
            <li><img src="./img/pic-mid-2.jpg" alt=""></li>
            <li><img src="./img/pic-mid-3.jpg" alt=""></li>
          </ul>
        </div>
      </div> -->


      <div class="piecing-dialog-body" v-if="puzzleMode === 'grid'">
        <div class="img-list img-middle-list">
          <ul class="clearfix">
            <li 
              v-for="(item, index) in info.imgList"
              :key="index"
            ><img src="./img/pic-1.jpg" alt="#"></li>
          </ul>
        </div> 
      </div>

      <div class="piecing-dialog-body" v-if="puzzleMode === 'list'">
        <div class="img-list">
          <ul>
            <li 
              v-for="(item, index) in info.imgList"
              :key="index"
            ><img src="./img/pic-1.jpg" alt="#"></li>
          </ul>
        </div> 
      </div>

      <div class="piecing-dialog-body text-center" v-if="puzzleMode === 'photo'">
        <img src="./img/pic-big-1.jpg" alt="" class="vertical-middle">
      </div>
      <!-- 一张图片则用照片模式 -->

      <div class="piecinge-footer">
        <div class="meidia clearfix">
          <div class="media-object pull-left"><img src="./img/2vcode.jpg" alt="#"></div>
          <div class="media-body text-right over-hidden">
            <p>&nbsp;</p>
            <p>扫描二维码</p>
            <p>去现场</p>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
const windowHeight = window.innerHeight;
export default {
  components: {},
  props: {
    info:{
      type: Object
    },
    puzzleMode: {
        type: String,
        default: 'photo'
    },
    piecingStyle: {
      type: Object,
      default: {
        color: '#333',
        background: '#fff'
      }
    }
  },
  data() {
    return {
    };
  },
  computed: {},
  methods: {
    getSynthesizedImgUrl(){
      html2canvas(this.$refs.piecingWrapper,{
        backgroundColor: null
      }).then(canvas=>{
        let dataUrl = canvas.toDataURL("image/png");
        this.$emit('set-img-url', dataUrl)
      });
    }
  },
  created() {},
  mounted() {
    this.$nextTick(()=>{
      let contentHeight = this.$refs.piecingWrapper.clientHeight;
      this.$emit('set-wrapper-class', contentHeight); 
    });
  }
};
</script>
<style lang="scss" scoped>
.piecing-dialog {
  width: 100%;
  padding: 20px 45px 35px;
  background-color: #fff;
  border-radius: 8px;
  text-align: left;

  .piecing-dialog-header {
    margin-bottom: 20px;
  }

  .piecing-dialog-title {
    font-size: 38px;
    color: #000;
    line-height: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .piecing-dialog-body {
    img { border-radius:4px; }
  }

  .piecing-dialog-desc {
    font-size: 30px;
    color: #666;
  }

  .piecinge-footer {
    margin-top: 24px;
    .media-object {
      width: 124px;
      height: 124px;
      overflow: hidden;
      > img { 
        width: 100%;
        height: 100%;
        vertical-align: middle; 
      }
    }

    p {
      font-size: 24px;
      line-height: 38px;
    }
  }

  .img-list {
    img {
      width: 100%;
      height: 150px;
    }
  }

  .img-middle-list {
    li {
      float: left;
      width: 50%;
      height: 200px;
      margin-bottom: 4px;
      overflow: hidden;
      &:nth-of-type(even){
        float: right;
        padding-left: 4px;
      }
      &:nth-of-type(odd){
        float: right;
        padding-right: 4px;
      }
    }
  }

  .img-small-list {
    li {
      width: 220px;
      height: 220px;
      margin-bottom: 4px;
      overflow: hidden;
    }
    img {
      width: 220px;
      height: 220px;
      max-width: 220px;
    }
  }



}
</style>